<template>
  <div class="right-bottom-module">
    <AccelerationChart
      :current-device="currentDevice"
      :device-positions="devicePositions"
      :current-position="currentPosition"
      :acceleration-type="accelerationType"
      :device-acceleration-data="deviceAccelerationData"
      :get-lathe-name-status="getLatheNameStatus"
      @switch-position="switchPosition"
      @switch-acceleration-type="switchAccelerationType"
      @go-to-inquiry="goToInquiry"
    />
  </div>
</template>

<script>
import AccelerationChart from './AccelerationChart.vue'

export default {
  name: 'RightBottomModule',
  components: {
    AccelerationChart
  },
  props: {
    currentDevice: {
      type: Object,
      required: true
    },
    devicePositions: {
      type: Array,
      default: () => []
    },
    currentPosition: {
      type: String,
      default: ''
    },
    accelerationType: {
      type: String,
      default: 'rms'
    },
    deviceAccelerationData: {
      type: Object,
      default: () => ({})
    },
    getLatheNameStatus: {
      type: Function,
      required: true
    }
  },
  methods: {
    switchPosition(position) {
      this.$emit('switch-position', position);
    },

    switchAccelerationType(type) {
      this.$emit('switch-acceleration-type', type);
    },

    goToInquiry() {
      this.$emit('go-to-inquiry');
    }
  }
}
</script>

<style lang="scss" scoped>
.right-bottom-module {
  display: flex;
  grid-column: 2 / span 2;
  grid-row: 2;
  height: 100%;
  width: 100%;
  min-height: 0; // 允许flex子项收缩
}
</style>
